<template>
  <div>
    <!-- 顶部搜索区域 -->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="出库单编号">
        <el-input v-model="searchForm.outboundId" placeholder="请输入名称"></el-input>
      </el-form-item>
      <el-form-item label="审核进度">
        <el-select v-model="searchForm.status" placeholder="请选择">
          <el-option label="等待审核" value="S001-1"></el-option>
          <el-option label="未通过" value="S001-2"></el-option>
          <el-option label="已通过" value="S001-3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="申请时间">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="开始日期" v-model="searchForm.startDate" style="width: 100%;"></el-date-picker>
        </el-col>
        <el-col :span="1" class="line" style="text-align: center">至</el-col>
        <el-col :span="11">
          <el-date-picker type="date" placeholder="结束日期" v-model="searchForm.endDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="payOrderNumber" label="出库单编号" width="180" align="center"></el-table-column>
      <el-table-column prop="reason" label="出库理由" width="185" align="center"></el-table-column>
      <el-table-column prop="totalAmount" label="出库总数(件)" width="180" align="center"></el-table-column>
      <el-table-column prop="totalPrice" label="总金额(元)" width="180" align="center"></el-table-column>
      <el-table-column prop="register" label="登记人" width="180" align="center"></el-table-column>
      <el-table-column prop="registerTime" label="登记时间" width="200" align="center"></el-table-column>
      <el-table-column prop="status" label="审核进度" width="190" align="center">
        <template slot-scope="scope">
          {{ getCheckTagText(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status === 'S001-1'" size="mini" type="text" @click="handleReview(scope.row)">审核</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页区域 -->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"      style="margin-top: 20px; text-align: right;"
    ></el-pagination>

    <!-- 对话框区域 -->
    <el-dialog :visible.sync="dialogVisible" width="80%" top="5vh">
      <div style="text-align: center">
        <h1>出库单(审核)</h1>
      </div>
      <div class="review-content">
        <div style="margin-bottom: 20px;">
          <el-row>
            <el-col :span="24" style="text-align: right">
              <el-button type="danger" plain  class="el-icon-check"> 拒绝请求</el-button>
              <el-button @click="submitReview" type="success"  class="el-icon-check"> 通过审核</el-button>
              <el-button type="danger" class="el-icon-refresh"> 返回</el-button>
            </el-col>
          </el-row>
        </div>
        <el-form label-width="100px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="出库单编号:">
                {{ orderInfo.payOrderNumber }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总数量:">
                {{ orderInfo.totalAmount }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="总价格:">
                {{ orderInfo.totalPrice }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item label="申请人:">
                {{ orderInfo.payer}}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间:">
                {{ orderInfo.registerTime }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-table :data="productTableData" style="width: 100%;height: 300px">
          <el-table-column prop="sequence" label="序号" align="center">
            <template slot-scope="scope">
              {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column label="图片" align="center">
            <template slot-scope="scope">
              <img :src="'/img'+scope.row.image" alt="商品图片" style="width: 50px; height: 50px;">
            </template>
          </el-table-column>
          <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
          <el-table-column prop="wareHouse" label="出货仓库" align="center"></el-table-column>
          <el-table-column prop="price" label="单价(元)" align="center"></el-table-column>
          <el-table-column prop="count" label="数量(件)" align="center"></el-table-column>
          <el-table-column prop="subTotal" label="小计(元)" align="center"></el-table-column>
        </el-table>
        <el-form ref="reviewForm" :model="reviewForm" label-width="100px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人:" prop="reviewer">
                <el-input style="width: 200px" v-model="reviewForm.reviewer" placeholder="请输入审核人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审核时间:">
                <el-input style="width: 200px" v-model="reviewForm.reviewerTime"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核理由:" prop="reason">
                <el-input type="textarea" v-model="reviewForm.reason" placeholder="请输入理由" maxlength="50" show-word-limit></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchForm: {
        outboundId: "",
        status: "",
        startDate: "",
        endDate: ""
      },
      orderInfo: {
        payOrderNumber: "",
        totalAmount: "",
        register: "",
        registerTime: "",
        totalPrice: ""
      },
      productTableData: [
        {
          productId: "",
          image: "",
          name: "",
          wareHouse: "",
          price: "",
          count: "",
          subTotal: ""
        }
      ],
      tableData: [
        {
          payId: "",
          payOrderNumber: "",
          reason: "",
          totalAmount: 0,
          totalPrice: "",
          register: "",
          registerTime: "",
          status: ""
        }
      ],
      reviewForm: {
        reviewer: '',
        reason: '',
        reviewerTime: ''
      },
      currentPage: 1,
      pageSize: 5,
      total: 0,
      dialogVisible: false, // 新增：控制对话框显示
      reviewData: {}, // 新增：存储审核数据
      reviewRules: {
        reviewer: [
          { required: true, message: '请输入审核人', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '请输入审核理由', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    initTable(){
      Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize, "CheckTage": "S001-1"});
      console.log(this.searchForm);
      this.$axios.post("http://localhost:8090/alipay/payReview", this.searchForm).then(({ data }) => {
        console.log(data);
        this.total = data.total;
        this.tableData = data.records.map(item => ({
          payId: item.payId,
          payOrderNumber: item.payOrderNumber,
          reason: item.reason,
          totalAmount: item.totalAmount,
          totalPrice: item.totalPrice +"元",
          register: item.register,
          registerTime: item.registerTime,
          status: item.checkTag
        }));
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      });
    },
    onSearch() {
      console.log("查询");
      this.selectInitTbl();
    },
    selectInitTbl() {
      Object.assign(this.searchForm, {"currentPage": this.currentPage, "pageSize": this.pageSize});
      console.log(this.searchForm);
      this.$axios.post("http://localhost:8090/alipay/payReview2", this.searchForm).then(({ data }) => {
        console.log(data);
        this.total = data.total;
        this.tableData = data.records.map(item => ({
          payOrderNumber: item.payOrderNumber,
          reason: item.checkReason,
          totalAmount: item.totalAmount,
          totalPrice: item.totalPrice +"元",
          register: item.register,
          registerTime: item.registerTime,
          status: item.checkTag
        }));
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      });
    },
    onReset() {
      this.searchForm = {
        outboundId: "",
        status: "",
        startDate: "",
        endDate: ""
      };
      this.initTable();
    },
    handleReview(row) {
      console.log("审核", row);
      this.reviewData = row;
      this.orderInfo = {
        payOrderNumber: row.payOrderNumber,
        totalAmount: row.totalAmount,
        register: row.register,
        registerTime: row.registerTime,
        totalPrice: row.totalPrice
      };
      //根据出库单编号去查询该出库单的所有商品
      this.$axios.get("http://localhost:8090/pay-details/"+row.payId).then(({ data }) => {
        console.log(data);
        this.productTableData = data.map(item => ({
          productId: item.product.productId,
          image: item.product.imgLink,
          name: item.product.name,
          wareHouse: item.stock.stockName,
          price: item.price,
          count: item.amount,
          subTotal: item.subTotal
        }));
        console.log('aaa:'+this.productTableData);
      }).catch(() => {
        this.$message({
          type: 'error',
          message: '初始化失败!'
        });
      });
      this.dialogVisible = true;
    },
    submitReview() {
      // 添加审核人和审核理由的非空判断
      if (!this.reviewForm.reviewer || !this.reviewForm.reason) {
        this.$message({
          type: 'warning',
          message: '审核人和审核理由不能为空'
        });
        return;
      }
      this.$confirm('是否通过审核?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 提交审核逻辑
        console.log('审核通过', this.reviewData, this.reviewForm);
        Object.assign(this.reviewForm, {"payOrderNumber": this.reviewData.payOrderNumber})
        this.$axios.post("http://localhost:8090/alipay/review",this.reviewForm).then(({ data }) => {
          console.log(data);
          if(data){
            this.$message({
              type: 'success',
              message: '审核成功!'
            });
            this.reviewForm = {
              reviewer: '',
              reason: '',
              reviewerTime: ''
            };
            this.initTable();
            this.dialogVisible = false; // 隐藏弹出框
          }else{
            this.$message({
              type: 'error',
              message: '审核失败!'
            });
          }
        });
      });
      console.log('提交审核:', this.reviewData);
      this.dialogVisible = false;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.initTable();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initTable();
    },
    getCheckTagText(checkTag) {
      switch (checkTag) {
        case 'S001-1':
          return '待审核';
        case 'S001-2':
          return '未通过';
        case 'S001-3':
          return '已通过';
        default:
          return checkTag;
      }
    },
  },
  mounted() {
    this.initTable();
  }
};
</script>

<style scoped>
.demo-form-inline {
  margin-bottom: 20px;
}
.el-table {
  margin-top: 20px;
}
.el-pagination {
  margin-top: 20px;
  text-align: right;
}
.el-table >>> .el-table__header tr th {
  background-color: lightgray;
  color: black;
}
</style>
